<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光按钮</title>
    <style>
        body {
            background-color: #000;
        }

        a.button {
            display: block;
            width: 160px;
            height: 50px;
            background-color: #333;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            color: #666;
            font-weight: bold;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            /* 相对定位 */
        }

        a.button:hover {
            color: yellow;
        }

        a.button::before {
            content: "";
            display: block;
            width: 300px;
            height: 300px;
            background-image: radial-gradient(yellow, transparent 40%);
            position: absolute;
            /* left: 0px;
            top: 0px; */
            left: var(--left);
            /* 使用自定义属性 --left 来控制彩色毛毛球的位置（水平方向）*/
            top: var(--top);
            /* 使用自定义属性 --top 来控制彩色毛毛球的位置（垂直方向）*/
            margin-left: -150px;
            margin-top: -150px;
            display: none;
        }

        a.button:hover::before {
            display: block;
            /* 鼠标移入时显示彩色毛毛球 */
        }

        a.button::after {
            content: "";
            display: block;
            position: absolute;
            /* 绝对定位 */
            left: 2px;
            right: 2px;
            top: 2px;
            bottom: 2px;
            background-color: #333;
            border-radius: 5px;
        }

        .m-center {
            margin: 50px auto;
        }

        a.button span {
            /* 相对定位用来调整元素层叠顺序 */
            position: relative;
            z-index: 1;
            /* z-index: 1; 提高层级，确保文字在最上层显示 */
        }
    </style>
</head>

<body>
    <a href="#" class="button m-center">
        <span>加入购物车</span>
    </a>
    <script>
        // 获取所有按扭
        const button = document.querySelector("a.button");
        // 遍历按扭，给每个按扭添加鼠标移入事件监听器

        button.onmousemove = function (e) {
            const pageX = e.pageX; // 获取鼠标与浏览器左边距离
            const pageY = e.pageY; // 获取鼠标与浏览器顶部距离
            const left = this.offsetLeft; // 获取按扭距离浏览器左边距离
            const top = this.offsetTop; // 获取按扭距离浏览器左边距离

            // 计算得到 鼠标相对于按扭左边和上边距离
            const x = pageX - left;
            const y = pageY - top;

            // 给伪元素设置自定义属性 --left 和 --top，用来控制彩色毛毛球的位置
            this.style.setProperty("--left", x + "px");
            this.style.setProperty("--top", y + "px");

            // 注意这一步，要将  button::before css 选择器的 中的 top 和 left 修改为
            // top:var(--top);  left:var(--left);
        };
    </script>
</body>

</html>
